<template>
  <div>
        <van-nav-bar
  title="编辑中心"
  left-text="返回"
  left-arrow
  @click-left="$router.push('/userinfo')"
/>
    <div class="avatar">
    <van-uploader :after-read="afterRead">
      <!-- <img class="avatar_img" :src="$baseURL+head_img" alt=""> -->
      <img v-if="head_img" class="avatar_img" :src="$baseURL+head_img" alt="">
      <img v-else src="@/images/75d28f97ly1fvuzkfr3h5j22c02c07wk.jpg" alt="">
      
    </van-uploader>
  </div>
   <van-cell-group>
    <van-cell :value="nickname" title="昵称"  is-link @click="nickNameShow=true" />
<van-cell title="密码" value="*****" is-link @click="passwordShow=true" />
<van-cell :value="gender===0 ? '👨':'👧'" title="性别"  is-link @click="gendershow=true"/>
</van-cell-group>
<van-button plain type="primary" size="large" class="out" @click="logOutHandle">退出登录</van-button>

<van-dialog v-model="nickNameShow" title="修改昵称" show-cancel-button @confirm="upDateInfoHandle('nickname',nickNameTemp)">
<van-cell-group>
  <van-field v-model="nickNameTemp" label="昵称" placeholder="请输入修改昵称" />
</van-cell-group>
</van-dialog>
<van-dialog v-model="passwordShow" title="修改密码" show-cancel-button @confirm="upDateInfoHandle('password',passwordTemp)">
<van-cell-group>
  <van-field v-model="passwordTemp" label="密码" placeholder="请输入修改密码" />
</van-cell-group>
</van-dialog>

<van-action-sheet
  v-model="gendershow"
  :actions="genderActions"
  @select="genderSelectHandle"
  cancel-text="取消"
  close-on-click-action
/>
  </div>
</template>

<script>
import { getUserInfo, removeToken, removeUserInfo } from '@/untails/mytoken'
import {userDetail,userFile,userUpdate} from '@/api'
import baseURL from '@/untails/baseURL'
export default {
   data () {
     return {
       nickNameShow:false,
       nickNameTemp:"",
       nickname:"",
       passwordShow:false,
       passwordTemp:"",
       gendershow:false,
       genderActions:[{name:'帅哥',gender:0},{name:'美女',gender:1}],
       head_img:"",
       gender:'',
       id:0
     }
   },
   mounted(){
     this.getCurrUserDetail()
     
   },
   methods:{
    //    afterRead({content,file}) {
    //   // 此时可以自行将文件上传至服务器
    //   // console.log(file);
    //   // this.head_img=content
    //   const fd=new FormData()
    //   fd.append('file',file)
    //   userFile(fd).then((res)=>{
    //     // console.log(res);
    //     const head_img=res.data.data.url
    //     this.head_img=head_img
    //      userUpdate({
    //        id:this.id,
    //        head_img:this.head_img
    //        }).then((res)=>{
    //     console.log(res);
    //     if(res.data.message==='修改成功'){
    //       this.$toast.success('更新头像成功')
    //     }
    //   })
    //   })
    // },
    afterRead({content,file}){
      // this.head_img=content
      const fd=new FormData()
      fd.append('file',file)
      userFile(fd).then((res)=>{
        const head_img=res.data.data.url
        this.head_img=head_img
        userUpdate({id:this.id,head_img:head_img}).then((res)=>{
          if(res.data.message==='修改成功'){
            this.$toast.success('更新头像成功')
          }
        })
      })
    },
      genderSelectHandle({gender}){
        console.log(gender);
        
        this.upDateInfoHandle('gender',gender)
        this.$toast.success('更改成功')
     },
    upDateInfoHandle(key,value){
       userUpdate({id:this.id,[key]:value}).then((res)=>{
         console.log(res);
         
         this.getCurrUserDetail()
         this.$toast.success('更改成功')
       })
    },
   logOutHandle(){
     removeToken()
     removeUserInfo()
     this.$router.replace('/home')
   },
     getCurrUserDetail(){
       const {id}=getUserInfo()
      //  this.id=id
       console.log(id);
        userDetail(id).then((res)=>{
          // console.log(res);
           const {nickname,head_img,gender,id}=res.data.data
       this.nickname=nickname
       this.head_img=head_img
       this.gender=gender
       this.id=id
        })
       
     }
   
   }
}
</script>

<style lang="less" scoped>
   .avatar{
     height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
     .avatar_img{
       height: 70px;
       width: 70px;
        border-radius: 50%;
     }
   }
   .out{
     margin-top: 40px;
   }
</style>